<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11_商品列表练习</title>
</head>
<body>
<table border="1px">
    <tr>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品库存</th>
    </tr>
</table>
<script>
    //下方的数组用来模拟从后端数据库请求回来的数据
    let productArr = [
        {title: '华为手机', price: 5000, stock: 100},
        {title: '苹果手机', price: 8000, stock: 200},
        {title: '小米手机', price: 3000, stock: 300},
        {title: '三星手机', price: 4000, stock: 400}
    ];
    //获取用来展示数据的表格元素
    let tableE = document.querySelector('table');
    //遍历商品数组,每拿到一件商品,表格就多一行
    for (let i = 0; i < productArr.length; i++) {
        //每次都需要创建1个tr与3个td
        let trE = document.createElement('tr');
        let titleTd = document.createElement('td');
        let priceTd = document.createElement('td');
        let stockTd = document.createElement('td');
        titleTd.innerHTML = productArr[i].title;
        priceTd.innerHTML = productArr[i].price;
        stockTd.innerHTML = productArr[i].stock;
        trE.append(titleTd, priceTd, stockTd);
        tableE.append(trE);
    }
</script>
</body>
</html>